<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
    <!--    <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>-->
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <link rel="stylesheet" th:href="@{/fonts/font-login/iconfont.css}"/>
    <link rel="stylesheet" th:href="@{/css/floatMessage.css}">
    <link rel="stylesheet" href="../static/fonts/font-login/iconfont.css"/>
    <link rel="stylesheet" href="../static/css/login.css"/>

</head>
<body>
<div id="floating-window" class="floating-window hidden">
    <p>这是一个飘窗提示!</p>
</div>
<div class="container sign-up-mode">
    <div class="forms-container">
        <div class="signin-signup">
            <form action="#" class="sign-up-form">
                <h2 class="title">注册</h2>
                <div class="box">
                    <div class="input-field">
                        <i class="iconfont icon-xingmingyonghumingnicheng">
                        </i>
                        <input type="text" placeholder="用户名:不要超过10个字符" required="required" class="input"
                               id="re_username"
                               name="username"/>
                        <i class="iconfont " id="re-username-judge">
                        </i>
                    </div>
                </div>

                <div class="box">
                    <div class="input-field">
                        <i class="iconfont icon-dianhuahaoma">
                        </i>
                        <input type="text" placeholder="电话号码:11位号码格式" id="re_phone" name="phone"
                               required="required" class="input"/>
                        <i class="iconfont" id="re-phone-judge">
                        </i>
                    </div>
                </div>
                <div class="box">
                    <div class="input-field">
                        <i class="fas fa-envelope">
                            <span class="iconfont icon-youxiang"></span>
                        </i>
                        <input type="email" placeholder="邮箱:@qq.com,@163.com,@outlook.com" id="re_email"
                               required="required" name="email" class="input"/>
                        <i class="iconfont" id="re-email-judge">
                        </i>
                    </div>
                </div>

                <div class="box">
                    <div class="input-field">
                        <i class="iconfont icon-mima">
                        </i>
                        <input type="password" placeholder="密码:8-20位任意字符" class="input" id="re_password"
                               required="required" name="userpassword"/>
                        <i class="iconfont" id="re-password-judge">
                        </i>
                    </div>
                </div>
                <button type="submit" class="btn submit" value="立即注册" id="register">立即注册</button>
                <a th:href="@{/blog/intoLogin}" style="color: black">登录</a>
            </form>
        </div>
    </div>
    <div class="panels-container">
        <div class="panel right-panel left-panel">
            <div class="content">
                <h3>已有帐号？</h3>
                <p>
                    立即登录已有帐号，享受独家权益。
                </p>
                <button class="btn transparent" id="sign-in-btn" th:href="@{/blog/intoLgin}">
                    去登录
                </button>
            </div>
            <img th:src="@{/images/login/register.svg}" class="image" alt=""/>
        </div>
    </div>
</div>
<script th:src="@{/js/app.js}"></script>
<script src="../static/js/app.js"></script>
<script>

    function isValidPhoneNumber(phoneNumber) {
        // 中国手机号码的正则表达式
        let re = /^1[3-9]\d{9}$/;
        return re.test(phoneNumber);
    }

    function isValidEmail(email) {
        let re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return re.test(email);
    }

    function isValidPassword(password) {
        // 8到20位数字字母组合
        let re = /^.{8,20}$/;
        return re.test(password);

    }

    function isValidUsername(username) {
        let re = /^.{1,10}$/;
        return re.test(username)
    }


    //拓展 实现直接添加在输入框的后面
    $(document).ready(function () {

        // 定义显示飘窗的函数
        function showFloatingWindow(message, duration = 3000) {
            const $floatingWindow = $('#floating-window');

            // 设置飘窗内容
            $floatingWindow.html(`<p>${message}</p>`);

            // 显示并设置动画
            $floatingWindow.stop(true, true).fadeIn(200).animate({bottom: '20px'}, 300);

            // 自动隐藏
            setTimeout(() => {
                $floatingWindow.animate({bottom: '-100px'}, 300, function () {
                    $(this).fadeOut(200);
                });
            }, duration);
        }

        /**
         * 注册
         */
        //电话格式判断
        $('#re_phone').blur(function () {
            if (isValidPhoneNumber($("#re_phone").val())) {
                $('#re-phone-judge').removeClass("icon-cuowu", "red")
                $('#re-phone-judge').addClass("icon-zhengque", "green")
            } else {
                // $('#numberError').text('号码格式不正确');
                $('#re-phone-judge').removeClass("icon-zhengque", "green")
                $('#re-phone-judge').addClass("icon-cuowu", "red")
                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
                // $('#emailInput').focus(function(e) { e.preventDefault(); });
            }
        });
        //电子邮件格式判断
        $('#re_email').blur(function () {
            if (isValidEmail($("#re_email").val())) {
                $('#re-email-judge').removeClass("icon-cuowu")
                $('#re-email-judge').addClass("icon-zhengque")
            } else {
                $('#re-email-judge').removeClass("icon-zhengque")
                $('#re-email-judge').addClass("icon-cuowu")
                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
                // $('#emailInput').focus(function(e) { e.preventDefault(); });
            }
        });

        //密码的格式判断
        $('#re_password').blur(function () {
            if (isValidPassword($("#re_password").val())) {
                $('#re-password-judge').removeClass("icon-cuowu")
                $('#re-password-judge').addClass("icon-zhengque")
            } else {
                $('#re-password-judge').removeClass("icon-zhengque")
                $('#re-password-judge').addClass("icon-cuowu")
                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
                // $('#emailInput').focus(function(e) { e.preventDefault(); });
            }
        });
        //对用户名格式判断
        $('#re_username').blur(function () {
            if (isValidUsername($("#re_username").val())) {
                $('#re-username-judge').removeClass("icon-cuowu")
                $('#re-username-judge').addClass("icon-zhengque")
            } else {
                $('#re-username-judge').removeClass("icon-zhengque")
                $('#re-username-judge').addClass("icon-cuowu")
                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
                // $('#emailInput').focus(function(e) { e.preventDefault(); });
            }
        });


        $('.sign-up-form').on('submit', function (event) {
            event.preventDefault(); // 阻止表单默认提交
            if (isValidUsername($("#re_username").val())
                && isValidPhoneNumber($("#re_phone").val())
                && isValidEmail($("#re_email").val())
                && isValidPassword($("#re-password").val())) {
                let user = {
                    role: 'ROLE_USER',
                    username: $("#re_username").val(),
                    userpassword: $("#re_password").val(),
                    phone: $("#re_phone").val(),
                    email: $("#re_email").val()
                }
                let jsonUser = JSON.stringify(user)
                $.ajax({
                    url: "/blog/register",
                    data: jsonUser,
                    type: "post",
                    contentType: "application/json;charset=UTF-8",//告诉服务器发送请求的数据格式为JSON
                    success: function (response) {
                        console.log(response)
                        if (response.status === 1) {
                            showFloatingWindow(response.message)
                            // window.location.href = '/blog/intoLogin'
                        } else {
                            showFloatingWindow(response.message)
                        }
                    },
                })
            } else {
                showFloatingWindow("输入信息格式有误！请检查！")
            }

        });
    })
</script>
</body>
</html>